<script setup>
import { ref } from 'vue'
import { tagUpdateService } from '@/api/tag'
import { tagAddService } from '@/api/tag'

const dialogVisible = ref(false)
const formModel = ref({
  tagName: '',
  createTime: '',
  id: ''
})
const formRef = ref()
const rules = {
  tagName: [
    { required: true, message: '名称不能为空', trigger: 'blur' },
    {
      pattern: /^\S{1,8}$/,
      message: '名称2-8个字符不能包含空格',
      trigger: 'blur'
    }
  ]
}
const emit = defineEmits(['success'])
const open = async (row) => {
  dialogVisible.value = true
  // console.log(row)
  formModel.value = { ...row }
}
const onSubmit = async (row) => {
  await formRef.value.validate()
  console.log(row)
  const isEdit = formModel.value.id
  if (isEdit) {
    await tagUpdateService(formModel.value)
    console.log('click')
    ElMessage.success('编辑成功')
  } else {
    await tagAddService(formModel.value)
    ElMessage.success('添加成功')
  }
  dialogVisible.value = false
  emit('success')
}

defineExpose({
  open
})
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="formModel.id ? '编辑标签类别' : '添加标签类别'"
    width="30%"
  >
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      label-width="100px"
      style="padding-right: 10px"
    >
      <el-form-item label="类别名称" prop="tagName">
        <el-input
          v-model="formModel.tagName"
          placeholder="请输入标签类别名称"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="formModel.createTime"
          type="date"
          placeholder="选择时间"
          style="width: 100%"
        />
      </el-form-item> -->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>
